<!-- 调查评价点下拉列表 -->
<template>
  <el-select
    size="small"
    filterable
    v-model="internalValue"
    placeholder="请选择调查评价点"
    clearable
    autocomplete="off"
    v-select-infinite="loadMore"
    :filter-method="filterMethod"
    @visible-change="visibleChange"
    @change="onchange"
    :loading="loading"
  >
    <el-option
      v-for="item in stashList.slice(startIndex, rangeNum)"
      :key="item.adcd"
      :value="item.adcd"
      :label="item.adnm"
    />
  </el-select>
</template>

<script>
import { listAddt } from '@/api/xlyMange';
import axios from 'axios';

export default {
  name: 'AdcdSelect',
  props: {
    wscd: {
      type: String,
      default: '',
    },
    value: {
      type: String,
      default: '',
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      maxItem: 10,
      internalValue: this.value, // 使用内部值来实现 v-model
      rangeNum: 10,
      customerList: [],
      stashList: [],
      loading: false,
      request: undefined,
    };
  },
  computed: {
    startIndex() {
      if (this.stashList.length > this.maxItem) {
        if (this.rangeNum >= this.stashList.length) {
          return this.stashList.length - this.maxItem;
        } else {
          return this.rangeNum - this.maxItem;
        }
      }
      return 0;
    },
  },
  watch: {
    value(newValue) {
      this.internalValue = newValue;
      this.initFilter(this.internalValue);
    },
    internalValue(newValue) {
      this.$emit('input', newValue);
    },
    wscd: {
      handler(val) {
        this.getList(val);
      },
      immediate: true,
    },
  },
  methods: {
    loadMore(key) {
      if (key === 'add') {
        if (this.rangeNum >= this.stashList.length) return;
        this.rangeNum += 1;
      } else if (key === 'subtract') {
        if (this.rangeNum <= this.maxItem) return;
        this.rangeNum -= 1;
      }
    },
    initFilter(newVal) {
      if (newVal) {
        const stashItem = this.stashList.findIndex((item) => {
          return item.adcd === newVal;
        });
        this.rangeNum = this.maxItem + stashItem;
      } else {
        this.rangeNum = this.maxItem;
      }
    },
    filterMethod(newVal) {
      if (newVal) {
        this.stashList = this.customerList.filter((item) => {
          return item.adnm.includes(newVal) || item.adcd === newVal;
        });
        this.rangeNum = this.maxItem;
      } else {
        this.stashList = this.customerList;
      }
    },
    visibleChange(val) {
      // if 判断，防止搜索的数据选中后，多一次下拉隐藏
      if (val === true) {
        this.stashList = this.customerList;
        this.initFilter(this.internalValue);
      }
    },
    onchange(val) {
      this.$emit('change', val);
    },
    getList(wscd) {
      this.loading = true;
      this.request?.cancel && this.request.cancel();
      this.request = axios.CancelToken.source();
      listAddt({ wscd }, this.request.token)
        .then((res) => {
          if (res.code === 200) {
            const data = res.rows.map((item) => {
              return {
                ...item,
                adnm: item.adnm ? item.adnm : item.adcd,
              };
            });
            this.stashList = data;
            this.customerList = data;
            this.initFilter(this.internalValue);
            this.onchange(this.internalValue);
          }
        })
        .finally(() => {
          this.loading = false;
          this.request = undefined;
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
